<!-- eslint-disable max-len -->
<template>
  <a-form-model
    class="detailPaddingPage"
    style="display: flex; flex-direction: column"
    :layout="formLayout"
    :colon="false">
    <!-- 升级任务 -->
    <a-form-model-item :label="$t('upgradeTask')" class="customFormModelItem2"></a-form-model-item>
    <a-form-model-item>
      <a-row>
        <!-- 任务名称 -->
        <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('campaignName') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.task.name"></table-ellipsis>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
        <!-- 任务批次名称 -->
        <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('batchName') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.taskGcyExtVo.batchName"></table-ellipsis>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
        <!-- 任务批次名称 -->
        <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('批次号') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.task.batchNo"></table-ellipsis>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
        <!-- 紧急OTA表单号 -->
        <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('gcySerialNo') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.approvalInfoDto.serialNo"></table-ellipsis>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
<!--      </a-row>-->
<!--      <a-row>-->
        <!-- 升级车辆总数 -->
        <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('升级车辆总数') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.countVehicle"></table-ellipsis>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-form-model-item>
    <!--    审批信息    -->
    <a-form-model-item :label="$t('auditInformation')" class="customFormModelItem2"></a-form-model-item>
    <a-form-model-item>
      <a-row>
        <!-- 审批状态 -->
        <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('auditStatus') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.approvalInfoDto.status"></table-ellipsis>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
        <!-- 审批人 -->
        <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('operatorName') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.approvalInfoDto.operatorName"></table-ellipsis>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
        <!-- 审批人工号 -->
        <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('operatorId') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.approvalInfoDto.operatorName"></table-ellipsis>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row>
        <!-- 审批人邮箱 -->
        <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('operatorMail') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.approvalInfoDto.operatorEmail"></table-ellipsis>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
        <!-- 审批节点名 -->
        <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('operatorNode') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.approvalInfoDto.nodeName"></table-ellipsis>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
        <!-- 操作时间 -->
        <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('operatorTime') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis
                  :text="formData.approvalInfoDto.createTime?
                    $options.filters.moment(formData.approvalInfoDto.createTime):'-'"
                >
                </table-ellipsis>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row>
        <!-- 审批意见 -->
        <a-col :md="24" :sm="24">
          <a-row>
            <a-col :md="3" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('operatorNote') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="20" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.approvalInfoDto.opinion?formData.approvalInfoDto.opinion:'-'">
                </table-ellipsis>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-form-model-item>
    <!-- 条件策略 -->
    <a-form-model-item :label="$t('tjcl')" class="customFormModelItem2"></a-form-model-item>
    <a-form-model-item>
      <a-table
        :columns="columns"
        :data-source="formData.conditionStrategys"
        :pagination="false"
        style="width:90%;marginLeft:5%">
        <span slot="returnResult" slot-scope="text,record">
          <span v-if="record.returnResult!==record.createApply" style="color: red">{{ record.returnResult }}</span>
          <span v-else>{{ record.returnResult }}</span>
        </span>
        <span slot="statusNote" slot-scope="text,record">
          <span v-if="record.statusNote=='已更新'" style="color: red">{{ record.statusNote }}</span>
          <span v-else>{{ record.statusNote }}</span>
        </span>
      </a-table>
    </a-form-model-item>
    <!-- 任务信息 -->
    <a-form-model-item :label="$t('campaignInfo')" class="customFormModelItem2"></a-form-model-item>
    <a-form-model-item>
      <a-table
        :columns="taskColumns"
        :data-source="formData.taskListMsg"
        :pagination="false"
        style="width:90%;marginLeft:5%">
        <span slot="vinListDetail" slot-scope="text,record">
          <a-button type="link" @click="exportTaskVehicle(record)">{{ record.vinListDetail }}</a-button>
        </span>
      </a-table>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
import {downloadBlobFile} from '@/utils/functions'
import ViewReleaseNote from '@/views/components/ViewReleaseNote'
import QuestionMarkTip from '@/views/components/QuestionMarkTip'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import {gcyAuditStrategyTableColumns, taskMsgTableColumns} from '../config/list'

export default {
  components: {TableEllipsis, QuestionMarkTip, ViewReleaseNote},
  data() {
    return {
      formLayout: 'horizontal',
      showEdit: false,
      columns: gcyAuditStrategyTableColumns,
      taskColumns: taskMsgTableColumns,
      formData: {
        task: {},
        strategyVo: {},
        taskGcyExtVo: {},
        conditionStrategys: [],
        taskListMsg: [],
        instanceResponse: {
          tasks: [],
          viewer: {
            finishedTaskSet: [],
            finishedSequenceFlowSet: [],
            unfinishedTaskSet: [],
            rejectedTaskSet: []
          }
        },
        taskUpgradeStatisticsVo: {},
        vehicleVersionVo: {
          model: {},
          ecuVersions: [{
            ecu: {},
            version: {}
          }]
        },
        approvalInfoDto: {},
        countVehicle: 0
      },
      formDataItems: {}
    }
  },
  mounted() {
    // 获取申请内容详情
    this.getApplicationDetail()
  },
  methods: {
    // 导出任务车辆
    exportTaskVehicle(record) {
      this.$api.exportTaskCarsGcy({taskId: this.$route.query.key, startTime: record.startTime, endTime: record.endTime})
        .then((res) => {
          downloadBlobFile(res, this.formData.vsmsRequestDto.batchNo + '_' + record.startTime + '_' + record.endTime + '.xlsx')
        })
        .finally(() => {
          this.exporting = false
        })
    },
    // 格式化有效时间
    formatExpirationDate(time) {
      return Math.ceil(time / 1000 / 24 / 60 / 60)
    },

    // 获取申请内容详情
    getApplicationDetail() {
      this.$api.getTaskApplicationGcyAuditDetail({
        taskId: this.$route.query.key,
        instanceId: this.$route.query.id
      }).then((res) => {
        this.formData = res.data
        //TODO liang.minglong
        this.formData.conditionStrategys = res.data.strategyItems
        let taskInfoList = []
        res.data.vsmsRequestDto.taskInfo.forEach(gcyTask => {
          taskInfoList.push({
            "batchName": res.data.vsmsRequestDto.batchDescr,
            "batchNo": res.data.vsmsRequestDto.batchNo,
            "startTime": gcyTask.startTime,
            "endTime": gcyTask.endTime,
            "carTotal": gcyTask.vins.length,
            "vinListDetail": "导出"
          })
        })
        this.formData.taskListMsg = taskInfoList
      })
    },
  }
}
</script>
<style lang="less" scoped>
::v-deep .ant-form-item {
  margin-bottom: 8px;
}

::v-deep .deepClass {
  font-weight: 600;
  margin-right: 38px;
  text-align: right;

}

::v-deep .ant-form-item-label {
  font-weight: 600;
  margin-right: 12px;
}

.customFormModelItem2 {
  ::v-deep .ant-form-item-label {
    &::before {
      display: inline-block;
      content: '';
      width: 6px;
      background-color: rgba(67, 136, 166, 1);
      height: 14px;
      vertical-align: middle;
      margin-right: 3px;
    }
  }
}
</style>
